<html>
	<head>
		<#assign path="${request.contextPath}"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta charset="utf-8"/>
		<#include "include/lib.ftl"/>
		<!-- 日期控件...开始 -->
		<link rel="stylesheet" href="${path}/css/bootstrap-datetimepicker.min.css">
		<script type="text/javascript" src="${path}/js/lib/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="${path}/js/lib/bootstrap-datetimepicker.zh-CN.js"></script>
		<!-- 日期控件...结束 -->
		<!-- select控件...开始 -->
		<link rel="stylesheet" href="${path}/css/bootstrap-select.min.css">
		<script type="text/javascript" src="${path}/js/lib/bootstrap-select.js"></script>
		<script type="text/javascript" src="${path}/js/lib/defaults-zh_CN.js"></script>
		<!-- select控件...结束 -->
		<style>
			.title{text-align:center;margin-bottom:3rem;}
		</style>
	</head>
	<body>
	<#include "include/header.ftl"/>
	
		<div>
			<h1 class="title">新增流水</h1>
			<div id="dialog" class="col-md-3 col-md-offset-9 col-sm-12"></div>
			<div id="main" style="display:none;" class="col-md-4 col-md-offset-4 col-sm-12">
				<div class="col-md-8 col-md-offset-2 col-sm-12">
					<form action="">
						<div class="form-group">
							<label for="description">描述</label>
							<input type="text" class="form-control" id="description" placeholder="请输入收支描述">
						</div>
						<div class="form-group">
							<label for="status">状态</label>
							<select id="status" class="form-control">
								<option value="1">支出</option>
								<option value="0">收入</option>
							</select>
						</div>
						<div class="form-group">
							<label for="type">类别</label>
							<select id="type" name="type.id" class="selectpicker form-control" data-live-search="true" title="请选择一个类型">
					      	</select>
						</div>
						<div class="form-group">
							<label for="money">金额</label>
							<input type="text" id="money" name="money" class="form-control"/>
						</div>
						<div class="form-group">
							<label for="time">日期</label>
							<input id="time" readonly class="form-control" data-link-field="useTime"/>
							<input name="sUseTime" id="useTime" type="hidden">
						</div>
						<div>
							<button id="commit" class="btn btn-success form-control" type="button">增&nbsp;&nbsp;加</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$("#main").css("display","block");
		$("#main").addClass("animated lightSpeedIn");
		
		function save(){
			var tag = validateForm();
			if(tag){
				var description = $("#description").val();
				var type = $("#type").val();
				var money = $("#money").val();
				money = money * 100;
				var sUseTime = $("#useTime").val();
				sUseTime = sUseTime.substring(0,10);
				$.ajax({
					url:"${path}/data/addStream.ajax",
					type:"post",
					dataType:"json",
					async:false,
					data:{description:description,"type.id":type,money:money,sUseTime:sUseTime},
					success:function(data){
						if("SUCCESS" == data.result){
							animate();
						}else{
				 			var dialog = new Dialog(data.msg,"warning");
				 			dialog.obj = "#dialog";
				 			dialog.show();
						}
					},
					error:function(e){
			 			var dialog = new Dialog("错误:服务器发生了未知的错误，请稍后再试","error");
			 			dialog.obj = "#dialog";
			 			dialog.show();
					}
				});
			}
		}
		//保存数据成功之后的动画
		function animate(){
			clear();
			$("#main").removeClass("lightSpeedIn");
			$("#main").addClass("bounceOut");
			
			$('#main').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
				$("#main").addClass("lightSpeedIn");
			});
		}
		
		//验证表单是否符合要求的数据
		function validateForm(){
			var description = $("#description").val();
			var type = $("#type").val();
			var money = $("#money").val();
			var sUseTime = $("#useTime").val();
			
			var warnCount = 0;
			var msg = "";


			if(sUseTime.trim() == ""){
				warnCount++;
				msg = "请选择此流水的发生时间";
			}else{
				
			}
			if(money == ""){
				warnCount++;
				msg = "请输入金额";
			}else{
				var exp = new RegExp("(^[1-9]+[\.][0-9]{1,2}[元]?$)|(^[0-9]+[元]?$)|(^[0][元]$)|(^[0][\.][0-9]{1,2}[元]?$)");
			    if(exp.test(money)){
			    	if(money == 0){
			    		warnCount++;
			    		msg = "金额不能为0";
			    	}else{
			    		//到这里，金额的验证就结束了，但是后台存放的是分，所以要*100
			    	}
			    }else{
			    	warnCount++;
			    	msg = "请输入一个正确的金额，最多两位小数";
			    }
			}
			if(type == ""){
				warnCount++;
				msg = "请选择一个类别";
			}
			if(description.trim() == ""){
				warnCount++;
				msg = "请输入描述";
			}

			if(warnCount > 0){
	 			var dialog = new Dialog(msg,"warning");
	 			dialog.obj = "#dialog";
	 			dialog.show();
	 			return false;
			}else{
				return true;
			}
		}
		
		$(function(){
			$('#time').datetimepicker({
			　　format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式 
			　　language: 'zh-CN', //汉化 
			  	weekStart: 1,
		        todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
	        });
			var status = $("#status").val();
			changeType(status);
			
			//绑定状态的改变事件
			$("#status").bind("change",function(){
				var status = $("#status").val();
				changeType(status);
			});
			
			//绑定增加事件
			$("#commit").bind("click",function(){
				save();	
			});
		});
		

		
		
		//刷新类型
		function changeType(status){
			$.ajax({
				url:"${path}/data/getTypeByStatus.ajax",
				type:"post",
				dataType:"json",
				data:{status:status},
				success:function(data){
					$("#type").empty();
					for(var i = 0 ; i < data.length; i ++){
						var op = "<option value='"+data[i].id+"'>"+data[i].typeName+"</option>";
	                     $("#type").append(op);    
	                                         //更新内容刷新到相应的位置
	                     $('#type').selectpicker('render');
	                     $('#type').selectpicker('refresh');
					}
				},
				error:function(e){
					
				}
			});
		}
		//清理表单数据
		function clear(){
			$("#description").val("");
			$("#money").val("");
		}
		$("#menu_newStream").addClass("active");
	</script>
</html>